<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="vote-box">
		<view class="list" v-for="item in list" :key="item.id" @click="goDetail(item)">
			<view class="txt1">{{ item.title }}</view>
			<!-- <view class="txt2">
				<text v-if="item.status == 1">草稿</text>
				<text v-else-if="item.status == 2">投票中</text>
				<text v-else-if="item.status == 3">已完毕</text>
				<text v-else-if="item.status == 4">已作废</text>
			</view> -->
			<view class="img">
				<image v-if="item.status == 2" src="../../static/images/tp.png"></image>
				<image v-else-if="item.status == 3" src="../../static/images/wb.png"></image>
				<image v-else-if="item.status == 4" src="../../static/images/zf.png"></image>
			</view>
			<view class="txt3">
				<text>本人是否投票：</text>
				<text v-if="item.isVote == 1" style="color: #57CB1D;">已投票</text>
				<text v-else style="color: #FB6A62;">未投票</text>
			</view>
		</view>
		<van-empty v-if="list.length == 0" description="暂无投票" />
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	components: {
	},
	computed: {
		...mapState(['fontSize'])
	},
	data() {
		return {
			params: {
				projId: uni.getStorageSync('projId'),
				residentId: uni.getStorageSync('userInfo').id,
				// delFlag: 0,
				pagination: {
					"pageSize": 10,
					"current": 1
				},
				sorter: {
					"field": "id",
					"order": 0
				}
			},
			list: [],
			isLoad: false
		}
	},
	onReady() {
		this.getList()
	},
	onReachBottom() {
		this.getList()
	},
	methods: {
		goDetail(item) {
			if (item.status == 2) {
				uni.navigateTo({
					url: '/vote/index/voteMsg?id=' + item.id
				})
			} else {
				uni.navigateTo({
					url: '/vote/index/voteResult?id=' + item.id
				})
			}
		},
		getList() {
			uni.showLoading()
			this.$http2.post('vx/ywh/vote/list', this.params).then(res => {
				if (res.code === 10000) {
					this.list = this.list.concat(res.data.list || [])
					this.isLoad = true
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.vote-box {
	height: 100vh;
	background: #FBFBFB;
	padding: 30rpx 25rpx;

	.list {
		height: 186rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(204, 204, 204, 0.5);
		border-radius: 12rpx;
		padding: 30rpx 14rpx;
		position: relative;
		margin-bottom: 28rpx;

		.txt1 {
			// width: 70%;
			height: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			position: relative;
			padding-left: 15rpx;
			margin-bottom: 42rpx;

			&::before {
				content: "";
				width: 6rpx;
				height: 24rpx;
				background: #FFE539;
				position: absolute;
				top: 10rpx;
				left: 0;
			}
		}

		.txt3 {
			color: #333333;
			font-size: 28rpx;
			padding-left: 15rpx;
		}

		.img {
			width: 90rpx;
			height: 90rpx;
			position: absolute;
			right: 40rpx;
			top: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
